<template>
  <div :class="$style.examine">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="examineFormData" :rules="examineFormRules" label-width="90px">
          <el-form-item prop="clueCustomerCode" label="客户编码">
            <el-input v-model.trim="examineFormData.clueCustomerCode" clearable placeholder="请输入客户编码" />
          </el-form-item>
          <el-form-item prop="phone" label="联系电话">
            <el-input v-model.trim="examineFormData.phone" clearable placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item prop="callStatus" label="接听状态">
            <SelectForDict
              dict-type-code="CRM_CALL_STATE"
              app-code="top2-crm"
              :code.sync="examineFormData.callStatus"
              placeholder="请选择接听状态"
            >
            </SelectForDict>
          </el-form-item>
          <el-form-item prop="inviteWay" label="邀约方式">
            <SelectForDict
              dict-type-code="CRM_CUSTOMER_INTENTION"
              app-code="top2-crm"
              :code.sync="examineFormData.inviteWay"
              placeholder="请选择邀约方式"
            >
            </SelectForDict>
          </el-form-item>
          <el-form-item prop="receptionCcName" label="接待客服">
            <el-input v-model="examineFormData.receptionCcName" clearable placeholder="请输入接待客服" />
          </el-form-item>
          <el-form-item prop="abnormalLogo" label="异常标识">
            <SelectForDict
              dict-type-code="CRM_CUSTOMER_ABNORMAL_LOGO"
              app-code="top2-crm"
              :code.sync="examineFormData.abnormalLogo"
              placeholder="请选择异常标识"
            >
            </SelectForDict>
          </el-form-item>
          <el-form-item prop="clueCustomerType" label="客户类型">
            <SelectForDict
              dict-type-code="CRM_CUSTOMER_TYPE"
              app-code="top2-crm"
              :code.sync="examineFormData.clueCustomerType"
              placeholder="请选择客户类型"
            ></SelectForDict>
          </el-form-item>
          <el-form-item prop="customerState" label="客户状态">
            <SelectForDict
              dict-type-code="CRM_CUSTOMER_STATE"
              app-code="top2-crm"
              :code.sync="examineFormData.customerState"
              placeholder="请选择客户状态"
            ></SelectForDict>
          </el-form-item>
          <el-form-item prop="assignedDisTime" label="分配时间" :span="12">
            <el-date-picker
              v-model="examineFormData.assignedDisTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :limite="new Date()"
              operator=">"
              opt
              :default-time="['00:00:00', '23:59:59']"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item prop="createTime" label="创建时间" :span="12">
            <el-date-picker
              v-model="examineFormData.createTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              :limite="new Date()"
              operator=">"
              opt
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item prop="clueCustomerLogo" label="客户标识">
            <SelectForDict
              dict-type-code="CRM_CUSTOMER_LOGO"
              app-code="top2-crm"
              :code.sync="examineFormData.clueCustomerLogo"
              placeholder="请选择客户标识"
            ></SelectForDict>
          </el-form-item>
          <el-form-item prop="isOrNo" label="只看待分配">
            <el-select v-model="examineFormData.isOrNo" clearable placeholder="--请选择--" @change="examineFormData.disName=''">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="examineFormData.isOrNo===0" prop="disName" label="服务经销商">
            <el-input v-model.trim="examineFormData.disName" clearable placeholder="请输入服务经销商" />
          </el-form-item>
          <el-form-item label-width="0">
            <div style="text-align:right">
              <Button @click="$refs.form.resetFields()">重置</Button>
              <Button type="primary" enter @click="queryHandle">查询</Button>
              <ExportPane :fields="exportFields" :data-source-func="dataSourceFunc" filename="商机查询" style="margin-right:10px;margin-left:5px;">导出</ExportPane>
            </div>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div :class="$style.btns">
        <Button type="primary" @click="$refs.tableBox.showSetting = true">设置表格样式</Button>
      </div>
      <table-box ref="tableBox" no-request :other-filters="otherFilters" :other-raw="paramsRaw" :table-config="tableConfig"></table-box>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { getDictName, getAddress } from '../common'
import SelectForDict from '@/components/SelectForDict'
import { ccDict } from '@/api/dataDict'
import ExportPane from '@/components/ExportPane'
import { optyPage } from '@/api/crm'
import { deepCopy } from '@/utils'
export default {
  name: 'Examine',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    ExportPane,
    SelectForDict
  },
  data() {
    return {
      getAddress,
      examineFormData: {
        clueCustomerCode: '', // 客户编码
        phone: '', // 联系电话
        callStatus: '', // 接听状态
        inviteWay: '', // 邀约方式
        receptionCcName: '', // 接待客服
        abnormalLogo: '', // 异常标识
        clueCustomerType: '', // 客户类型
        customerState: '', // 客户状态
        clueCustomerLogo: '', // 客户标识
        isOrNo: '', // 只看待分配
        disName: '', // 服务经销商
        assignedDisTime: [], // 分配时间
        createTime: [] // 创建时间
      },
      paramsRaw: {},
      selectedArry: [],
      otherFilters: [],
      examineFormRules: {},
      callStatusList: [],
      customerIntentionList: [],
      thirdSourceList: [],
      consumerTypeOpList: [],
      optyStateList: [],
      optySignList: [],
      unusualSignList: [],
      pickerOptions: {
        disabledDate(date) {
          return date > new Date()
        }
      },
      // 导出
      exportFields: {
        clueCustomerCode: '客户编码', name: '客户姓名', phone: '电话号码', getAddress: { label: '客户地址', handler: this.getAddress },
        callTotal: '外呼次数', callStatus: { label: '接听状态', propEnum: {
          appCode: 'top2-crm',
          domainCode: 'marketing',
          dictTypeCode: 'CRM_CALL_STATE'
        }}, inviteWay: { label: '邀约方式', propEnum: {
          appCode: 'top2-crm',
          domainCode: 'marketing',
          dictTypeCode: 'CRM_CUSTOMER_INTENTION'
        }}, thirdSource: { label: '来源渠道', propEnum: {
          appCode: 'top2-crm',
          domainCode: 'marketing',
          dictTypeCode: 'CRM_CUSTOMER_TERTIARY_SOURCE'
        }}, createTime: '创建时间',
        submitTime: '报名时间', receptionCcName: '接待客服', ccRemarks: '客服备注', comments: '备注', advertisementPage: '活动名称',
        clueCustomerType: { label: '客户类型', propEnum: {
          appCode: 'top2-crm',
          domainCode: 'marketing',
          dictTypeCode: 'CRM_CUSTOMER_TYPE'
        }},
        assignedDisTime: '分配时间', disName: '服务经销商', customerState: { label: '客户状态', propEnum: {
          appCode: 'top2-crm',
          domainCode: 'marketing',
          dictTypeCode: 'CRM_CUSTOMER_STATE'
        }}, clueCustomerLogo: { label: '客户标识', propEnum: {
          appCode: 'top2-crm',
          domainCode: 'marketing',
          dictTypeCode: 'CRM_CUSTOMER_LOGO'
        }}, abnormalLogo: { label: '异常标识', propEnum: {
          appCode: 'top2-crm',
          domainCode: 'marketing',
          dictTypeCode: 'CRM_CUSTOMER_ABNORMAL_LOGO'
        }}, isDisAdvertisement: {
          label: '是否自投',
          propEnum: {
            appCode: 'top2-crm',
            domainCode: 'marketing',
            dictTypeCode: 'CRM_COMMON_BOOLEAN'
          }}
      },
      tableConfig: {
        interfacePath: '/call-center/api/v2/crm/opty/page',
        tabIndex: 1,
        onlySettingBtn: true,
        setting: [
          {
            prop: 'clueCustomerCode',
            label: '客户编码',
            minWidth: 120,
            className: 'table-click-text',
            isButton: true,
            clickFun: this.detail
          },
          {
            prop: 'name',
            label: '客户姓名',
            minWidth: 120
          },
          {
            prop: 'phone',
            label: '电话号码',
            minWidth: 120,
            className: 'table-click-text',
            isButton: true,
            clickFun: this.callPhone
          },
          {
            prop: 'detailedAddress',
            label: '客户地址',
            minWidth: 140,
            formatData: row => this.getAddress(row)
          },
          {
            prop: 'callTotal',
            label: '外呼次数',
            minWidth: 100
          },
          {
            prop: 'callStatus',
            label: '接听状态',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CALL_STATE'
            }
          },
          {
            prop: 'inviteWay',
            label: '邀约方式',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_INTENTION'
            }
          },
          {
            prop: 'thirdSource',
            label: '来源渠道',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_TERTIARY_SOURCE'
            }
          },
          {
            prop: 'submitTime',
            label: '报名时间',
            minWidth: 140
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 140
          },
          {
            prop: 'receptionCcName',
            label: '接待客服',
            minWidth: 100
          },
          {
            prop: 'ccRemarks',
            label: '客服备注',
            minWidth: 140
          },
          {
            prop: 'comments',
            minWidth: 140,
            label: '备注'
          },
          {
            prop: 'advertisementPage',
            label: '活动名称',
            minWidth: 120
          },
          {
            prop: 'clueCustomerType',
            label: '客户类型',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_TYPE'
            }
          },
          {
            prop: 'assignedDisTime',
            label: '分配时间',
            minWidth: 140
          },
          {
            prop: 'disName',
            label: '服务经销商',
            minWidth: 140
          },
          {
            prop: 'customerState',
            label: '客户状态',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_STATE'
            }
          },
          {
            prop: 'clueCustomerLogo',
            label: '客户标识',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_LOGO'
            }
          },
          {
            prop: 'abnormalLogo',
            label: '异常标识',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_ABNORMAL_LOGO'
            }
          },
          {
            prop: 'isDisAdvertisement',
            label: '是否自投',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_COMMON_BOOLEAN'
            }
          },
          {
            prop: 'operator1',
            label: '操作',
            fixed: 'right',
            render: (h, row) => {
              const vnode = [
                h('span', { class: 'table-click-text', style: { display: 'inline-block', marginRight: '10px' }, on: { click: () => this.detail(row) }}, '查看')
              ]
              const { belongDept, customerState, disCode } = row
              if (belongDept === 'BrandManageDept' && customerState === 'Normal' && !disCode) {
                vnode.push(
                  h('span', { class: 'table-click-text', style: { display: 'inline-block' }, on: { click: () => this.edit(row) }}, '编辑')
                )
              }
              return h('div', vnode)
            }
          }
        ]
      }
    }
  },
  created() {
    // 来电弹屏跳转过来是，检查是否带有联系电话
    const { phone, accntPhoneOp } = this.$route.query
    if (phone || accntPhoneOp) {
      this.$set(this.examineFormData, 'phone', phone || accntPhoneOp)
    }
  },
  activated() {
    // this.queryHandle(1)
  },
  mounted() {
    this.setPageDictList()
  },
  methods: {
    // 根据条件查询
    queryHandle(type) {
      const filtersRaw = []; let bol = false
      const eq = 'clueCustomerCode phone callStatus inviteWay abnormalLogo clueCustomerType customerState clueCustomerLogo'.split(' ')
      const dateTimeRange = 'assignedDisTime createTime'.split(' ')
      // isOrNo 是否分配
      const paramsRaw = {}
      const { isOrNo } = this.examineFormData
      if (isOrNo !== '' && isOrNo !== undefined && isOrNo !== null) {
        paramsRaw.isDistribute = isOrNo === 1 ? 'N' : 'Y'
        bol = true
      }
      this.paramsRaw = paramsRaw
      for (const [k, v] of Object.entries(this.examineFormData)) {
        if (k === 'isOrNo') {
          continue
        }
        if (v === '' || v === undefined || v === null) {
          continue
        }
        if (v instanceof Array && v.length === 0) {
          continue
        }
        bol = true
        if (eq.includes(k)) {
          filtersRaw.push({ id: k, property: k, value: v, operator: '=' })
        } else if (dateTimeRange.includes(k)) {
          if (v instanceof Array && v.length === 2) {
            filtersRaw.push({ id: `${k}0`, property: k, value: v[0], operator: '>=' })
            filtersRaw.push({ id: `${k}1`, property: k, value: v[1], operator: '<=' })
          }
        } else {
          filtersRaw.push({ id: k, property: k, value: v, operator: 'like' })
        }
      }
      // if (type && !bol) {
      //   return
      // }
      if (!bol) {
        return this.$message.warning('请至少输入一个查询项')
      }
      this.otherFilters = filtersRaw
      if (type !== 'export') {
        this.initTableData()
      }
    },
    initTableData(type = 'opCondition') {
      this.$nextTick(() => {
        this.$refs.tableBox.initTableData(type)
      })
    },
    // 商机查询
    dataSourceFunc() {
      this.queryHandle('export')
      const params = deepCopy(this.otherFilters)
      if (params.length <= 0 && Object.keys(this.paramsRaw).length <= 0) {
        this.$message.warning('请选择筛选条件!')
        return Promise.reject()
      }
      const data = new FormData()
      data.append('pageFlag', false)
      data.append('filtersRaw', JSON.stringify(params))
      data.append('paramsRaw', JSON.stringify(this.paramsRaw))
      data.append('page', 1)
      data.append('rows', 10000)
      return optyPage(data).then(res => {
        return res.data.records
      })
    },
    detail(row) {
      // this.$router.push({name:'WaitCallOutDetail',params:{id:134070543572664320}})
      this.$router.push({
        name: 'WaitCallOutDetail',
        query: { id: row.id }
      })
    },
    edit(row) {
      this.$router.push({
        name: 'WaitCallOutEdit',
        query: { id: row.id }
      })
    },
    // 导出事件
    exportFunc(data) {
      console.log('导出', data)
    },
    // 表格上的电话号码点击
    callPhone(row) {
      if (row.belongDept === 'BrandManageDept' && (row.customerState === 'Normal') && (!(row.disName) || (row.disName).length <= 0)) {
        this.$router.push({ name: 'WaitCallOutEdit', query: { id: row.id }})
      } else {
        this.$message.info('此商机不能外呼')
      }

      // this.$router.push({
      //   path: '/callBar/callOut',
      //   query: { callTel: row.phone }
      // })
    },
    getDictName(val, list) {
      return getDictName(val, list)
    },
    // 配置页面所需字典
    setPageDictList() {
      this.getDictList('CRM_CALL_STATE', 'callStatusList', true)
      this.getDictList('CRM_CUSTOMER_INTENTION', 'customerIntentionList', true)
      this.getDictList('CRM_CUSTOMER_TERTIARY_SOURCE', 'thirdSourceList', true)
      this.getDictList('CRM_CUSTOMER_TYPE', 'consumerTypeOpList', true)
      this.getDictList('CRM_CUSTOMER_STATE', 'optyStateList', true)
      this.getDictList('CRM_CUSTOMER_LOGO', 'optySignList', true)
      this.getDictList('CRM_CUSTOMER_ABNORMAL_LOGO', 'unusualSignList', true)
    },
    getDictList(code, listName, isCrm) {
      ccDict(code, isCrm).then(res => {
        this[listName] = res.data
      })
    }
  }
}
</script>

<style lang="scss" module>
@import "@/styles/mixin.scss";
.examine {
  .btns {
    @include flex($justify: flex-end);
  }
}
</style>
